<template>
	<view>
		<view class="navTop">
			<view class="leftnav">
				<view class="recommend" @tap="toRecommend()">
					<img src="../../static/information/md-chat.svg" alt="消息">
				</view>
				<view class="title">评论</view>
			</view>
			<view class="rightnav">
				<view class="msg" @tap="toNotice()">
					<img src="../../static/information/fa-bell.svg" alt="通知">
				</view>
				<view class="title">通知</view>
			</view>
		</view>
		<view class="chat">
			<view class="chat-one" @tap="toChat()">
				<image src="../../static/information/avata.jpg" mode=""></image>	
				<view class="chat-rightbox">
					<view class="dateAndName">
						<view class="UserName">
							{{user.name}}
						</view>
						<view class="chatDate">
							{{user.date}}
						</view>
					</view>				
					<view class="content">
						{{user.content}}
					</view>
				</view>
			</view>
			<hr>
			<view class="chat-one" @tap="toChat()">
				<image src="../../static/information/haqian.jpg" mode=""></image>	
				<view class="chat-rightbox">
					<view class="dateAndName">
						<view class="UserName">
							{{user.name}}
						</view>
						<view class="chatDate">
							{{user.date}}
						</view>
					</view>				
					<view class="content">
						{{user.content}}
					</view>
				</view>
			</view>
		</view>
		<hr>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user:{
					name:'我只会喊666',
					content:'您好，请问四级资料还出吗',
					date:'7月13号'
				}
			}
		},
		methods: {
			toRecommend(){
				uni.navigateTo({
					url:'./recommend'
				})
			},
			toNotice(){
				uni.navigateTo({
					url:'./notice'
				})
			},
			toChat(){
				uni.navigateTo({
					url:'../chat/chat'
				})
			}
		}
	}
</script>

<style>

.navTop{
	display: flex;
	height: 30%;
	justify-content: center;
	align-items: center;
	margin-top: 15px;
}
.recommend {
	width: 65px;
	height: 65px;
	border: solid 1px white;
	background-color: #C2EAFF;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.msg{
	width: 65px;
	height: 65px;
	border: solid 1px white;
	background-color: #BEE7E9;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.leftnav{
	margin-right: 56px;
}
.title{
	text-align: center;
	font-size: 17px;
}
img{
	width: 40px;
	height: 40px;
}
.chat{
	width: 100%;
	height: auto;
	align-items: center;
	margin-top: 30px;
}
image{
	height: 73px;
	width: 73px;
	border: solid 0.5rpx whitesmoke;
	border-radius: 50%;
	border: 2rpx solid rgb(150, 150, 150);
	margin-left: 15px;
	margin-right: 15px;
}
.chat-one{
	display: flex;
	margin-top: 15px;
	margin-bottom: 15px;
}
.dateAndName{
	display: flex;
}
.UserName{
	width: 175px;
	margin-top: 8px;
	font-size: 18px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.chatDate{
	margin-top: 8px;
	font-size: 14px;
	color: #BBBBBB;
	margin-left: 25px;
}
.content{
	font-size: 15px;
	margin-top: 15px;
	color: #BBBBBB;
}
hr{
	background-color:#EDEFF4;
	height: 1px;
	border:none;
}
</style>
